import Vue from 'vue'
import storage from '@/utils/storage'
import store from '@/store'

/** 权限指令**/
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    if (binding.value !== undefined && binding.value !== '') {
      let btnPermissionsStr = storage.getSession('pl_accesses')
      if (btnPermissionsStr === undefined || btnPermissionsStr == null) {
        vnode.context.$nextTick(() => {
          el.parentNode.removeChild(el)
        })
        return
      }
      let value = binding.value
      let $routeName = store.getters.router.name
      value = $routeName + '_' + value
      if (!Vue.prototype._has(btnPermissionsStr, value)) {
        vnode.context.$nextTick(() => {
          el.parentNode.removeChild(el)
        })
      }
    }
  }
})
// 权限检查方法
Vue.prototype._has = function (btnPermissionsStr, value) {
  let isExist = false
  if (btnPermissionsStr.indexOf(value) > -1) {
    isExist = true
  }
  return isExist
}

Vue.prototype.$_has = function (values) {
  let $routeName = store.getters.router.name
  let isExist = true
  let btnPermissionsStr = storage.getSession('pl_accesses')
  if (btnPermissionsStr === undefined || btnPermissionsStr == null || values === '') {
    return false
  }
  let pattern = /_+/g
  let arry = values.split(',')
  for (let item of arry) {
    let value = pattern.test(item) ? item : $routeName + '_' + item
    if (Vue.prototype._has(btnPermissionsStr, value)) {
      isExist = false
    }
  }
  return isExist
}

export {has}

// v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
Vue.directive('loadmore', {
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown__wrap') || el.querySelector('.el-table__body-wrapper')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      /*
       * scrollHeight 获取元素内容高度(只读)
       * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
       * clientHeight 读取元素的可见高度(只读)
       * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
       * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
       */
      let sign = 80
      const CONDITION = (((this.scrollHeight - this.scrollTop) - (Math.ceil(this.scrollHeight / 2)) <= this.clientHeight) && this.scrollTop > sign)
      if (this.scrollTop > sign) {
        sign = this.scrollTop
      }
      if (this.scrollTop < sign) {
        sign = this.scrollTop
      }
      if (CONDITION) {
        binding.value()
      }
    })
  }
})

Vue.directive('focus', function (el, option) {
  let defClass = 'el-input'; let defTag = 'input'
  let value = option.value || true
  if (typeof value === 'boolean') { value = { cls: defClass, tag: defTag, foc: value } } else { value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false } }
  if (el.classList.contains(value.cls) && value.foc) { el.getElementsByTagName(value.tag)[0].focus() }
})

Vue.directive('fullScreen', {
  bind (el, binding, vnode) {
    let value = binding.value
    let i = document.createElement('i')
    i.className = 'fa fa-expand'
    el.appendChild(i)

    let isFullScreen = false

    el.addEventListener('click', function () { // 添加事件
      let elem = el
      if (value !== undefined && value !== null && value.objectId !== undefined && value.objectId !== null && value.objectId !== '') {
        elem = document.getElementById(value.objectId)
      }

      if (isFullScreen) {
        exitFullscreen(elem)
      } else {
        requestFullScreen(elem)
      }

      value !== undefined && value !== null && value.fn && value.fn.call()// 这里就是运行fn回调
    })

    function changefullscreen () {
      isFullScreen = !isFullScreen
      if (isFullScreen) {
        i.classList.remove('fa-expand')
        i.classList.add('fa-compress')
      } else {
        i.classList.remove('fa-compress')
        i.classList.add('fa-expand')
      }
    }

    function requestFullScreen (elem) {
      if (elem.requestFullscreen) {
        elem.requestFullscreen()
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen()
      } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen()
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen()
      }
    }
    function exitFullscreen (element) {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    }

    listenfullscreen(changefullscreen)
    function listenfullscreen (callback) {
      function listen () {
        callback()
      }
      document.addEventListener('fullscreenchange', function (e) {
        listen()
      })
      document.addEventListener('mozfullscreenchange', function (e) {
        listen()
      })
      document.addEventListener('webkitfullscreenchange', function (e) {
        listen()
      })
      document.addEventListener('MSFullscreenChange', function (e) {
        listen()
      })
    }
  }
})

/**
 * layout 拖动resize指令
 */

Vue.directive('handlerSize', {
  inserted (el, binding) {
    let isDrag = false
    const minSpaceX = 50
    const minSpaceY = 41
    let element1 = document.getElementById(binding.value.element1)
    let element2 = document.getElementById(binding.value.element2)
    let parent = element1.parentElement
    function getStyle (obj, name) { // 需要设置了宽度才能使用
      if (obj.currentStyle) { // IE
        let value = obj.currentStyle[name]
        if (name === 'width' || name === 'height') {
          return value.indexOf('%') > -1 ? (name === 'width' ? obj.offsetWidth : obj.offsetHeight) : value
        } else {
          return value
        }
      } else {
        return getComputedStyle(obj, false)[name] // 非IE
      }
    }
    function resizeElement (movementX, movementY) {
      if (binding.value.type === 'row') {
        let subtotal = 0
        let rowOffsetHeight = parseInt(getStyle(parent, 'height'))
        let ele1OffsetHeight = parseInt(getStyle(element1, 'height'))
        let ele2OffsetHeight = parseInt(getStyle(element2, 'height'))

        for (let i = 0; i < parent.children.length; i++) {
          if (parent.children[i] !== element2 && parent.children[i] !== element1) {
            subtotal += parseInt(getStyle(parent.children[i], 'height'))
          }
        }
        let height1 = 0
        let height2 = 0
        if (ele1OffsetHeight + movementY < minSpaceY) {
          height1 = minSpaceY
          height2 = rowOffsetHeight - subtotal - height1
        } else if (ele2OffsetHeight - movementY < minSpaceY) {
          height2 = minSpaceY
          height1 = rowOffsetHeight - subtotal - height2
        } else {
          height1 = (ele1OffsetHeight + movementY)
          height2 = rowOffsetHeight - subtotal - height1
        }
        element1.style.height = height1 + 'px'
        element2.style.height = height2 + 'px'
      } else {
        let subtotal = 0
        let rowOffsetWidth = parseInt(getStyle(parent, 'width'))
        let ele1OffsetWidth = parseInt(getStyle(element1, 'width'))
        let ele2OffsetWidth = parseInt(getStyle(element2, 'width'))

        for (let i = 0; i < parent.children.length; i++) {
          if (parent.children[i] !== element2 && parent.children[i] !== element1) {
            subtotal += parseInt(getStyle(parent.children[i], 'width'))
          }
        }
        let width1 = 0
        let width2 = 0
        if (ele1OffsetWidth + movementX < minSpaceX) {
          width1 = minSpaceX
          width2 = rowOffsetWidth - subtotal - width1
        } else if (ele2OffsetWidth - movementX < minSpaceX) {
          width2 = minSpaceX
          width1 = rowOffsetWidth - subtotal - width2
        } else {
          width1 = ele1OffsetWidth + movementX
          width2 = rowOffsetWidth - subtotal - width1
        }
        element1.style.width = width1 + 'px'
        element2.style.width = width2 + 'px'
      }
      binding.value.fn.call()
    }
    el.onmousedown = () => {
      if (!element1 || !element2 || !parent) {
        element1 = document.getElementById(binding.value.element1)
        element2 = document.getElementById(binding.value.element2)
        parent = element1.parentElement
      }
      isDrag = true
    }// 前一个鼠标移动事件
    let previousEvent
    document.addEventListener('mousemove', (event) => {
      if (isDrag) {
        let x = event.movementX
        let y = event.movementY
        if (!x) {
          x = event.screenX - previousEvent.screenX
          y = event.screenY - previousEvent.screenY
        }
        if (Math.abs(x) > 1 || Math.abs(y) > 1) {
          resizeElement(x, y)
        }
      }
      previousEvent = event
    })
    document.addEventListener('mouseup', () => {
      if (isDrag) {
        isDrag = false
      }
    })
  }
})

